// import React from 'react';

// import List from '../views/router-view/List';
// import Detail from '../views/router-view/Deail'
// import { Switch, Route, Redirect } from 'react-router-dom'
// type Props = {};

// export default function Index({ }: Props) {
//     return (
//         <Switch>
//             <Route path='/list' component={List}></Route>
//             <Route path='/detail' component={Detail}></Route>
//             <Redirect from='/' to='/list' exact></Redirect>
//         </Switch>
//     )
// }



// 如下是使用router6版本

import React from 'react'

// 第四步: 使用内置的路由组件实现定义路由规则
// Routes 相当于  Switch, 保证路由规则匹配从上到下匹配,并且只能匹配一个路由规则, 
// Routes 必须包含Route,而在router@5版本中, switch组件可以不写, router@6中 Routes必须有
// Route 组件和路由5一样, 只不过属性有区别, path 和 component 属性, 现在是 path 和 element 属性

import { Routes, Route, Navigate } from 'react-router-dom'

// 引入对应的页面组件
import Home from '../views/router-view/Home'
import Category from '../views/router-view/Category'
import Car from '../views/router-view/Car'
// 路由重定向
//在router@5中 使用内置的路由组件 <Redirect/>
//在router@6中, 使用内置组件<Navigate to='path'/> ,Redirect没有了.


// 路由@6 版本中path可以大小写.但在router@5中是不可以的
// 如果要实现大小写的严格匹配, 使用 在Route组件上使用  caseSensitive,实现大小写严格匹配

type Props = {}
export default function Index({ }: Props) {

    return (
        <Routes>
            <Route path='/home' element={<Home />}></Route>
            <Route path='/category' caseSensitive element={<Category />}></Route>
            <Route path='/car/*' element={<Car />}></Route>
            {/* 
               路由重定向
               Navigate组件页面只要渲染该组件, 就会执行该组件上的to 属性,实现页面的跳转
            */}
            <Route path='/' element={<Navigate to='/home'></Navigate>}></Route>
        </Routes>
    )
}


